<template>
  <n-modal :show="state.dialogFormVisible" @onUpdateShow="close">
    <div class="upd-avatar">
      <div class="flex">
        <div class="avatar-cropper">
          <vue-cropper
            ref="cropperRef"
            :img="state.img"
            :info="true"
            :autoCrop="true"
            :outputSize="state.size"
            :outputType="state.outputType"
            @realTime="handReal"
          ></vue-cropper>
        </div>
        <div class="avatar-right">
          <div
            class="avatar-right-div"
            v-for="(item, index) in previewsDiv"
            :key="index"
          >
            <div
              v-show="priveImgSrc"
              :class="previews.div"
              class="avatar-right-previews"
            >
              <img :src="priveImgSrc" />
            </div>
          </div>
        </div>
      </div>
      <div class="tool flex justify-end">
        <n-button class="cancel-btn" @click="close">取消</n-button>
        <n-button class="submit-btn" type="primary" @click="handSubmit">
          确定
        </n-button>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
import { NModal, NButton } from 'naive-ui'
import { reactive, ref } from 'vue'
import systemApi from '@/service/api/system'
const emit = defineEmits(['success'])
interface stateInterface {
  dialogFormVisible: boolean
  img: null | string
  size: number
  outputType: string
}
const state = reactive<stateInterface>({
  dialogFormVisible: false,
  img: null,
  size: 200,
  outputType: 'jpeg'
})
const priveImgSrc = ref('')
const previews: any = ref({})
const previewsDiv = [
  {
    style: {
      width: '108px',
      height: '108px',
      margin: '0 auto'
    }
  },
  {
    style: {
      width: '68px',
      height: '68px',
      margin: '0 aut'
    }
  },
  {
    style: {
      width: '48px',
      height: '48px',
      margin: '0 auto'
    }
  }
]
const handReal = (e: any) => {
  previews.value = e
  cropperRef.value.getCropBlob((data: any) => {
    var img = window.URL.createObjectURL(data)
    priveImgSrc.value = img
  })
}
const cropperRef = ref()
const handSubmit = () => {
  cropperRef.value.getCropBlob((file: any) => {
    const params: any = new FormData()
    params.append('file', file)
    systemApi.upload(params).then(({ data }) => {
      emit('success', data.url)
      close()
    })
  })
}
const close = () => {
  state.dialogFormVisible = false
}
const open = (file: any) => {
  state.img = URL.createObjectURL(file)
  state.dialogFormVisible = true
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.upd-avatar {
  width: 600px;
  background: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 24px;
  .avatar-cropper {
    width: 400px;
    height: 400px;
  }
  .avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
  }
  .avatar-right {
    margin-left: 20px;
    width: 150px;
    height: 400px;
    background-color: #f0f2f5;
    border-radius: 4px;
    padding: 16px 0;
    box-sizing: border-box;

    .avatar-right-div {
      border: 3px solid #ffffff;
      border-radius: 50%;
      margin: 0 auto 20px auto;
      width: 112px;
      height: 112px;
      img {
        width: 108px;
        height: 108px;
        margin: 0 auto;
      }
      &:nth-child(2) {
        width: 72px;
        height: 72px;
        img {
          width: 68px;
          height: 68px;
          margin: 0 auto;
        }
      }
      &:nth-child(3) {
        width: 52px;
        height: 52px;
        img {
          width: 48px;
          height: 48px;
          margin: 0 auto;
        }
      }
    }

    .avatar-right-previews {
      overflow: hidden;
      img {
        border-radius: 50%;
        object-fit: cover;
      }
    }
  }
  .tool {
    margin-top: 20px;
    .cancel-btn {
      width: 120px;
    }
    .submit-btn {
      width: 120px;
      margin-left: 10px;
    }
  }
}
</style>
